<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  setup: () => {
    const option = ref({
      title: {
        text: "MBTI班级分布占比",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["ENFJ", "ENFP", "ENTJ", "ENTP", "ESFJ","ESFP","ESTJ","ESTP","INFJ","INFP","INTJ","INTP","ISTJ","ISTP","ISFJ","ISFP"]
      },
      series: [
        {
          name: "Traffic Sources",
          type: "pie",
          radius: "70%",
          center: ["50%", "60%"],
          data: [
            { value: 2, name: "ENFJ"},
            { value: 3, name: "ENFP"},
            { value: 4, name: "ENTJ"},
            { value: 2, name: "ENTP"},
            { value: 2, name: "ESFJ"},
            { value: 3, name: "ESFP"},
            { value: 4, name: "ESTJ"},
            { value: 2, name: "ESTP"},
            { value: 2, name: "INFJ"},
            { value: 3, name: "INFP"},
            { value: 4, name: "INTJ"},
            { value: 2, name: "INTP"},
            { value: 2, name: "ISFJ"},
            { value: 3, name: "ISFP"},
            { value: 4, name: "ISTJ"},
            { value: 2, name: "ISTP"}         
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    });

    return { option };
  }
});
</script>

<style scoped>
.chart {
  height: 650px;
}
</style>

<template>
    <div class="chart-container">
		<div id="chartPie" style="width:100%; height:550px;"></div>
	</div>
</template>
 
<script>
    export default {
        name: "FilmChart2",
		data() {
        	return {
        		chartPie: '',
				typeName: [],//影片类型名称
				typeNum: [] //影片类型数量
			}
		},
		methods: {
        	drawPieChart() {
				this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
				this.chartPie.setOption({
					//设置标题,副标题,以及标题位置居中
					title: {
						text: '影片统计(饼状图)',
						//subtext: '纯属虚构',
						x: 'center'
					},
					//具体点击某一项触发的样式内容
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					//左上侧分类条形符
					legend: {
						orient: 'vertical',
						left: 'left',
						data: []
					},
					//饼状图类型以及数据源
					series: [
						{
							name: '统计数量',
							type: 'pie',
							//radius: '70%',
							//center: ['50%', '60%'],
							data: [],
							//设置饼状图扇形区域的样式
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}
					]
				});
			},
			//动态获取饼状图的数据
			async initData() {
        		var res = await this.axios.get("film/countFilm2");
				console.log(res.data);
				var getData = [];
				//先进行赋值
				for(let i=0; i<res.data.length; i++) {
					var obj = new Object();
					obj.name = res.data[i].typeName;
					obj.value = res.data[i].num;
					getData[i] = obj;
				}
				this.chartPie.setOption({
					legend: {
						data: res.data.typeName,
					},
					series:[{
							data: getData,
						}]
				});
			},
			drawCharts() {
				this.drawPieChart();
			},
		},
		mounted () {
        	this.initData();
			this.drawCharts();
		}
 
    }
 
</script>
 
<style scoped>
	.chart-container {
		width: 100%;
		float: left;
	}
</style>